<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
    <meta name="google-site-verification" content="LgblCrocw4d4ccdOkob0kzt3Ing7mMy1dKTtLoUb-2s" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="keywords" content="how crop images, how zoom images, crop image,CropZooom, rotate image, zoom image, jquery plugin, crop plugin, zoom plugin, rotation, croppping, zooming" />
    <meta name="description" content="CropZoom is a plugin that let you select, rotate and zoom an image to make a crop. This is free and ready to use." />
    <title>CropZoom another Jquery Plugin</title>


    <script type="text/javascript" src="js/script.js"></script>
    <link href="css/jquery-ui-1.10.3.custom.min.css" rel="Stylesheet" type="text/css" />
    <link href="css/jquery.cropzoom.css" rel="Stylesheet" type="text/css" />
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.10.3.custom.min.js"></script>
    <script type="text/javascript" src="mycrop.js"></script>
    <!--<script type="text/javascript" src="http://cropzoom.googlecode.com/svn/trunk/plugin/jquery.cropzoom.js"></script>-->
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
    <!--[if IE 6]><link rel="stylesheet" href="css/style.ie6.css" type="text/css" media="screen" /><![endif]-->
    <!--[if IE 7]><link rel="stylesheet" href="css/style.ie7.css" type="text/css" media="screen" /><![endif]-->
    <style type="text/css">
        #zoom,#rot{
            width:360px;
            margin:auto;
            height:25px;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function(){
            var cropzoom = $('#crop_container').mycrop({
                width:400,
                height:300,
                bgColor: '#CCC',

                selector:{
                    centered:true,
                    startWithOverlay: true,
                    borderColor:'blue',
                    borderColorHover:'red'
                },
                image:{
                    source:'chicas1024.jpg',
                    width:1024,
                    height:768,
                    minZoom:10,
                    maxZoom:150
                }
            });
            cropzoom.setSelector(45,45,200,150,true);
            $('#crop').click(function(){
                cropzoom.send('resize_and_crop_imagick.php','POST',{},function(rta){
                    $('.result').find('img').remove();
                    var img = $('<img />').attr('src',rta);
                    $('.result').find('.txt').hide().end().append(img);
                });
            });
            $('#restore').click(function(){
                $('.result').find('img').remove();
                $('.result').find('.txt').show()
                cropzoom.restore();
            })
        })
    </script>
    <style type="text/css">
        #img_to_crop{
            -webkit-user-drag: element;
            -webkit-user-select: none;
        }
    </style>
</head>
<body>
<div id="page-background-simple-gradient">
</div>
<div id="page-background-glare">
    <div id="page-background-glare-image"></div>
</div>
<div id="main">
    <div class="Sheet">
        <div class="Sheet-tl"></div>
        <div class="Sheet-tr"></div>
        <div class="Sheet-bl"></div>
        <div class="Sheet-br"></div>
        <div class="Sheet-tc"></div>
        <div class="Sheet-bc"></div>
        <div class="Sheet-cl"></div>
        <div class="Sheet-cr"></div>
        <div class="Sheet-cc"></div>
        <div class="Sheet-body">
            <div class="nav">
                <div class="l"></div>
                <div class="r"></div>
                <ul class="menu">
                    <li>
                        <a href="index.html" class=" active"><span class="l"></span><span class="r"></span><span class="t">About</span></a>
                    </li>
                    <li>
                        <a href="download.html"><span class="l"></span><span class="r"></span><span class="t">Download and Docs</span></a>
                    </li>
                </ul>
            </div>


            <div class="contentLayout">
                <div class="content">
                    <div class="Post">
                        <div class="Post-body">
                            <div class="Post-inner">
                                <div class="PostMetadataHeader">
                                    <h2 class="PostHeader">
                                        About
                                    </h2>
                                </div>
                                <div class="PostContent">
                                    <p>CropZoom is a plugin that let you select an area of an image to crop, whit this you can zoom in or zoom out,drag and also rotate.
                                        this plugins needs ui.droppable, ui.resizable, ui.slider from JQuery UI.
                                        Some code was taken from jquery.svgdom.js Written by Keith Wood.
                                    </p>
                                    <br />
                                    <br />
                                    <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
                                        <input type="hidden" name="cmd" value="_s-xclick" />
                                        <input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----" />
                                        <input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" />
                                        <img alt="" border="0" src="https://www.paypal.com/es_XC/i/scr/pixel.gif" width="1" height="1" />
                                    </form>
                                </div>
                                <div class="cleared"></div>
                            </div>
                            <div class="cleared"></div>
                        </div>
                    </div>
                    <div class="Post">
                        <div class="Post-body">
                            <div class="Post-inner">
                                <div class="PostMetadataHeader">
                                    <h2 class="PostHeader">
                                        Author
                                    </h2>
                                </div>
                                <div class="PostContent">
                                    <p>Gaston Robledo <br /> <a href="mailto:gastonrobledo@gmail.com" target="_blank">gastonrobledo@gmail.com</a>, contact me if you want ask something or if you found some issues in the plugin.
                                    </p>
                                </div>
                                <div class="cleared"></div>
                            </div>
                            <div class="cleared"></div>
                        </div>
                    </div>
                    <div class="Post">
                        <div class="Post-body">
                            <div class="Post-inner">
                                <div class="PostMetadataHeader">
                                    <h2 class="PostHeader">
                                        Last Update
                                    </h2>
                                </div>
                                <div class="PostContent">
                                    See Download Section.
                                </div>
                                <div class="cleared"></div>
                            </div>

                            <div class="cleared"></div>
                        </div>
                    </div>
                    <div class="Post">
                        <div class="Post-body">
                            <div class="Post-inner">
                                <div class="PostMetadataHeader">
                                    <h2 class="PostHeader">
                                        Example
                                    </h2>
                                </div>
                                <div class="PostContent">
                                    <div class="boxes">
                                        <div id="crop_container"></div>
                                        <div class="result">
                                            <div class="txt">Here you will see the cropped image</div>
                                        </div>
                                        <div class="cleared"></div>
                                    </div>
                                    <br />
                                              <span class="button-wrapper" id="crop">
                                                    <span class="l"> </span>
                                                    <span class="r"> </span>
                                                    <a class="button" href="javascript:void(0)">Crop</a>
                                              </span>
                                    &nbsp;
                                              <span class="button-wrapper" id="restore">
                                                    <span class="l"> </span>
                                                    <span class="r"> </span>
                                                    <a class="button" href="javascript:void(0)">Restore</a>
                                              </span>
                                </div>
                                <div class="cleared"></div>
                            </div>

                            <div class="cleared"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="cleared"></div><div class="Footer">
            <div class="Footer-inner">
                <div class="Footer-text">
                    <p><a href="mailto:gastonrobledo@gmail.com">Contact</a>
                        Copyright &copy; 2009 Gaston Robledo (<a href="http://www.codigosutiles.com.ar/" target="_blank">Codigos Utiles</a>). All Rights Reserved.</p>
                </div>
            </div>
            <div class="Footer-background"></div>
        </div>
            <div class="cleared"></div>
        </div>
    </div>
    <div class="cleared"></div>
</div>

</body>
</html>
